<template>
    <div>
      <el-dialog :title="data.titleName" v-model="data.children_page" :close-on-click-modal='false'
       :append-to-body='true' width="800px">
        <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="100px" >


          <el-form-item label="所属软件：" prop="software" style="width:90%;" >
            <el-input v-model.trim="ruleForm.software"  />
          </el-form-item>
          <el-form-item label="数据类型：" prop="status" style="width:90%;">
            <el-select v-model="ruleForm.status" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
          <el-form-item label="IP机器码：" prop="ip" style="width:90%;" >
            <el-input v-model.trim="ruleForm.ip"  /> 
          </el-form-item>

          <el-form-item label="备注信息：" prop="remark"  style="width:90%;">
            <el-input v-model.trim="ruleForm.remark"  /> 
          </el-form-item>
     

       


          <el-form-item>
            <el-button @click="data.children_page = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit(ruleFormRef)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  <script lang="ts" setup>
import UploadImg from "./Upload/Img.vue";
    import {
      blacklistdata,
    } from '../../../api/index';
    import {
      ElMessage,
      ElTree
    } from "element-plus";
    // import type { FormInstance } from 'element-plus' 
    import {
      ref,
      reactive,
      nextTick,
      // defineProps,//defineProps声明props;具备完整的类型推断;<script setup>直接可用
      // defineEmits,//defineEmits声明事件;具备完整的类型推断;<script setup>直接可用
      // defineExpose//暴露出去;<script setup>直接可用
    } from 'vue';
import { log } from "console";
// 数据类型
const status = [
  {
    value: '0',
    label: 'IP地址',
  },
  {
    value: '1',
    label: '机器码',
  },
  {
    value: '2',
    label: '账号',
  },
];

    const test1 = ref('')
const test2 = ref('')
// const test1=(v:any)=>{
//   console.log("接收到子组件的值",v)
//   alert(2);
// }
    const ruleFormRef = ref();//表单ref
    //获取tree选中的值
    const treeRef = ref < InstanceType < typeof ElTree >> ();
    const emit = defineEmits(["onItemChange"]);//声明事件(父级页面上添加的 @监听事件)
 
    //数据双向绑定;复杂类型数据=>响应式数据
    const data = reactive({
      titleName: '',
      checkAll: false,
      children_page: false,
      isAdd: false,
      systems: [{
        name: '开发1部',
        id: 'water'
      }, {
        name: '市场部',
        id: 'pollution'
      }],
      nowKeys: [] as any[], // 属性需要做类型断言处理 //树-选中数据
      treeDatas: [], //树-总数据
      id: '',
    });
    //ts类型断言
    //定义类型
    interface User {
      id: string;
      addtime: string;
        status: string;
        ip: string;
        remark: string;
        software: string;
       
    };
    const ruleForm = reactive({
    addtime: '',
		status: '',
		ip: '',
		remark: '',
    software: '',
    });
    const rules = ref({
      name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 50,
          message: '长度在 1 到 50 个字符',
          trigger: 'blur'
        }
      ],
      
    });
    //父调子的子
    const addItemShow = (now_name: string) => {
      data.titleName = '添加角色';
      data.children_page = true;
      data.isAdd = true;
      ruleForm.addtime = "";
        ruleForm.status = "0";
        ruleForm.ip = "";
        ruleForm.software = "";
        ruleForm.remark = "";
    
        console.log(ruleForm);
        
      nextTick(() => {
      ruleFormRef.value.resetFields();//重置表单
      })
    };
    //父调子的子
    const addItemShow2 = (row: User, now_name: string) => {
      data.titleName = '编辑角色';
      data.children_page = true;
      data.isAdd = false;
      nextTick(() => {
        ruleFormRef.value.resetFields();//重置表单
        ruleForm.addtime = row.addtime;
        ruleForm.ip = row.ip;
        ruleForm.status = row.status;
        ruleForm.software = row.software;
        ruleForm.wsstatus = row.wsstatus;
        ruleForm.remark = row.remark;
       
        data.id = row.id;
      })
    };
    //添加/修改   : FormInstance | undefined
    const onSubmit = async (formEl:any) => {
      if (!formEl) return
      formEl.validate((valid:any) => {
        if (valid) {
          if (data.isAdd) { 
            addRoles();
          } else {
            changeRoles();
          }
        } else {
          return false;
        }
      });
    };
// ref的作用是实现响应式， 如果没有ref则不能实现响应式（引用数据类型用reactive）
          // 使用ref包裹的数据，需要通过 .value 的形式访问他的值
    const addRoles = () => { 
      console.log(499);
      let params = {
        action: 'apiadd',
        addtime: ruleForm.addtime,
        ip: ruleForm.ip,
        status: ruleForm.status,
        software: ruleForm.software,
        remark: ruleForm.remark,
       
      }
      // 新增
      blacklistdata(params).then(res => {
        console.log(525);
        if (res.status == 200) {
          ElMessage({
            showClose: true,
            message: '操作成功',
            type: 'success',
          })
          data.children_page = false;
          emit("onItemChange");
        } else if (res.status  !== 200) {
          ElMessage.error(res.statusText);
        }
      })
    };
    //修改接口
    const changeRoles = () => {
      
      let params = {
        action: 'apiedit',
        id: data.id,
        addtime: ruleForm.addtime,
        ip: ruleForm.ip,
        status: ruleForm.status,
        software: ruleForm.software,
        remark: ruleForm.remark,
       
        
      }
// 修改
blacklistdata(params).then(res => {
        console.log(296);
        console.log(res)
        console.log(res.status)
        if (res.status == 200) {
          ElMessage({
            showClose: true,
            message: '操作成功',
            type: 'success',
          })
          data.children_page = false;
          emit("onItemChange");
        } else if (res.status  !== 200) {
          ElMessage.error(res.statusText);
        }
      })
    };
    defineExpose({
      addItemShow,
      addItemShow2
    }) //将子组件方法暴露出来，让父组件调用
  </script>
  <style scoped>
    .jurisdiction-border {
      width: 500px;
      height: 300px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow: auto;
    }
   
    .jurisdiction-border::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: rgb(241, 241, 241);
      border-radius: 3px;
    }
   
    .jurisdiction-border::-webkit-scrollbar-thumb {
      background-color: rgb(193, 193, 193);
      border-radius: 3px;
    }
   
    .tree-name-leave {
      margin-leave: 5px;
    }
  </style>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>